<template>
	<view class="page-design-list">
		<view class="nav-title">搜索</view>
		<view class="app-flex">
			<input class="input" v-model="param.keyword" placeholder="请输入搜索关键词" @input="wordInput"/>
			<button @click="search" class="btn-search">搜索</button>
			<button type="primary" class="btn-add" @click="toDetail()">添加</button>
		</view>
		
		<view class="nav-title">列表</view>
		<view class="table">
			<view class="th tr">
				<view class="td">ID</view>
				<view class="td">别名</view>
				<view class="td">标题</view>
				<view class="td">时间</view>
				<view class="td">操作</view>
			</view>
			
			<view class="tr" v-for="val in list" :key="val._id">
				<view class="td">{{val._id}}</view>
				<view class="td">{{val.name}}</view>
				<view class="td">{{val.title}}</view>
				<view class="td">{{dateFormat(val.time_update)}}</view>
				<view class="td">
					<text class="btn-detail" @click="toDetail({_id: val._id})">详情</text>
				</view>
			</view>
		</view>
		<view class="table-empty" v-if="isInit&&!list.length">~空空如也~</view>
		
		<me-pagination :total="total" :num="param.pageNum" @change="pageChange"></me-pagination>
	</view>
</template>

<script>
	import {apiDesignList} from '../../api/design.js';
	import {showToast, dateFormat} from '../../common/util.js';
	export default {
		data() {
			return {
				isInit:false,
				param:{
					keyword: "",
					pageNum: 1
				},
				list: [],
				total: 0
			}
		},
		onShow() {
			this.init()
		},
		methods: {
			init(){
				this.param.keyword = ""
				this.param.pageNum = 1
				this.getList()
			},
			wordInput(){
				if(!this.param.keyword) this.search() // 搜索关键词清空时,刷新列表
			},
			search(){
				this.param.pageNum = 1
				this.getList()
			},
			getList(){
				apiDesignList(this.param).then(res=>{
					this.isInit = true
					this.list = res.data
					this.total = res.affectedDocs
				})
			},
			pageChange(num){
				this.param.pageNum = num
				this.getList()
			},
			toDetail(param){
				let url = "/uni_modules/me-page-design/pages/design/edit"
				if(param && param._id) url += "?_id="+param._id
				uni.navigateTo({url}) 
			},
			dateFormat(time){
				return dateFormat(time)
			}
		}
	}
</script>

<style lang="scss">
	.page-design-list{
		padding: 0 20px;
		.nav-title{
			padding: 20px 0 15px;
			font-size: 14px;
			color: #666;
		}
		
		.input{
			width: 300px;
			height: 46px;
			border-radius: 4px;
			padding-left: 10px;
			border: 1px solid #eee;
		}
		
		.btn-search{
			width: 100px;
			margin: 0 20px;
		}
		
		.btn-add{
			width: 100px;
			margin: 0;
		}
		
		.btn-detail{
			padding: 0 12px;
			color: $uni-color-primary;
			cursor: pointer;
		}
		
		.table{
			position: relative;
			width: 100%;
			display: table;
			text-align: center;
			margin-bottom: 10px;
			.tr{
				display: table-row;
				font-size: 14px;
				&:hover{
					background-color: rgba($color: $uni-color-primary, $alpha: 0.03)
				}
				.td{
					display: table-cell;
					max-width: 300px;
					padding: 12px 0;
					overflow: auto;
					border-right: 1px solid #eee;
					border-bottom: 1px solid #eee;
					&:first-child{
						border-left: 1px solid #eee;
					}
				}
				&.th{
					background-color: #eee;
				}
				::-webkit-scrollbar {
					height: 4px;
				}
			}
		}
		.table-empty{
			text-align: center;
			font-size: 14px;
			color: #999;
		}
		
		.app-flex{display: flex;align-items: center;}
		.app-flex .flex-item{position: relative;flex: 1;min-width: 0;white-space: nowrap;}
	}
</style>
